<template>
  <div class="czrz">
    <div>
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        style="margin-left: 15px"
        >查询</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 15px"
      :header-cell-style="{
        color: '#000',
        backgroundColor: 'rgb(222,234,255)',
      }"
      height="650"
    >
      <el-table-column prop="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="jdDate" label="操作时间"> </el-table-column>
      <el-table-column prop="ys" label="操作人" width="250">
      </el-table-column>
      <el-table-column prop="date" label="操作类型" width="250">
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "王洛勇",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张云龙",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "李文文",
          six: "女",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张雨生",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
    };
  },
};
</script>
  
  <style>
.czrz {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}
</style>